<template>
  <div>
    <button class="openModalBtn" @click="addStudent">添加学生</button>
    <button class="openModalBtn" @click="delSelectedStudent">删除</button>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

const props = defineProps<{
  selectedStudents: any[]; // 使用具体的类型
  studentArr: any[]; // 使用具体的类型
}>();

const emit = defineEmits(['add', 'deleteSelected']);

const addStudent = () => {
  emit('add');
};

const delSelectedStudent = () => {
  emit('deleteSelected', props.selectedStudents);
};
</script>

<style scoped>
 button {
      padding: 6px 12px;
      font-size: 14px;
      border-radius: 4px;
      margin-right: 5px;

      &.editBtn {
        background-color: #ff9800;
        color: #fff;

        &:hover {
          background-color: #e68900;
        }
      }

      &.deleteBtn {
        background-color: #f44336;
        color: #fff;

        &:hover {
          background-color: #d32f2f;
        }
      }
    }
</style>
